<template>
  <div v-loading="loading">
    <div v-empty="list.length === 0">
      <div class="log-items">
        <follow-record-cell
          v-for="(item, index) in list"
          :item="item"
          :crmType="crmType"
          :is-seas="isSeas"
          :canEdit="canEdit"
          :logType="logType"
          :type="type"
          :index="index"
          :key="index"
          @on-handle="cellHandle"
        />
        <div class="load">
          <el-button type="text" :loading="loadMoreLoading">
            {{ loadMoreLoading ? "加载更多" : "没有更多了" }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FollowRecordCell from "./components/FollowRecordCell"; // 跟进记录
import { crmRecordIndex } from "@/api/customermanagement/common";
import { formatTimeToTimestamp } from "@/utils";

export default {
  /** 线索管理 的 线索详情 的 跟进记录*/
  name: "record-log",
  components: {
    FollowRecordCell,
  },
  props: {
    /** 模块ID */
    id: [String, Number],
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: "",
    },
    // 只有客户模块需要传这个
    logType: {
      type: String,
      default: undefined,
    },
    /** 是公海 默认是客户 */
    isSeas: {
      type: Boolean,
      default: false,
    },
    // 是否可编辑
    canEdit: {
      type: Boolean,
      default: false,
    },
    // 区分 私库 成交客户 公海
    type: {
      type: String,
      default: "",
    },
  },
  watch: {
    id(val) {
      this.refreshList();
    },
    logType(val) {
      this.refreshList();
    },
  },
  data() {
    return {
      loading: false,
      loadMoreLoading: true,
      isPost: false,
      page: 1,
      list: [], // 跟进记录列表
    };
  },
  computed: {},
  mounted() {
    this.$bus.on("follow-log-refresh", (data) => {
      if (data.type == "record-log") {
        this.refreshList();
      }
    });

    // 分批次加载
    let self = this;
    let item = document.getElementById("follow-log-content");
    item.onscroll = function () {
      let scrollTop = item.scrollTop;
      let windowHeight = item.clientHeight;
      let scrollHeight = item.scrollHeight; //滚动条到底部的条件

      if (scrollTop + windowHeight == scrollHeight && self.loadMoreLoading == true) {
        if (!self.isPost) {
          self.isPost = true;
          self.page++;
          self.getList();
        } else {
          self.loadMoreLoading = false;
        }
      }
    };

    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      crmRecordIndex({
        page: this.page,
        limit: 10,
        types: "crm_" + this.crmType,
        types_id: this.id,
        type: this.logType,
        by: "record", // 类型（record 跟进记录，log 日志、examine审批、task 任务、event日程、默认是全部）
      })
        .then((res) => {
          this.list = this.list.concat(res.data.list);
          if (res.data.list.length < 10) {
            this.loadMoreLoading = false;
          } else {
            this.loadMoreLoading = true;
          }
        })
        .finally(() => {
          this.isPost = false;
          this.loading = false;
        });
    },
    refreshList() {
      this.page = 1;
      this.list = [];
      this.getList();
    },
    /**
     * 功能菜单
     */
    cellHandle(data) {
      // 行布局删除
      if (data.type == "delete") {
        this.list.splice(data.data.index, 1);
      } else if (data.type == 'commission') {
        this.refreshList();
      }
    },
  },

  beforeDestroy() {
    this.$bus.off("follow-log-refresh");
  },
};
</script>

<style lang="scss" scoped>
.log-items {
  min-height: 400px;
  position: relative;
}

.load {
  color: #999;
  font-size: 13px;
  margin: 0 auto 15px;
  text-align: center;
  .el-button,
  .el-button:focus {
    color: #ccc;
    cursor: auto;
  }
}
</style>
